<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
<!--    <link rel="stylesheet" href="./css/bootstrap.css">-->
    <script src="css/jquery.js"></script>
<!--    <script src="./css/bootstrap.js"></script>-->
    <!-- 引入 layui.css -->
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/css/layui.min.css">-->

    <!-- 引入 layui.js -->
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>-->
</head>
<body>
    <header>
        <div class="header-container">
            <div class="search-area" style="position: relative">
                <select id="condition" style="position: absolute;left: 0;top: 0;width: 120px;height: calc(100% - 2px);margin-left:1px;margin-top:1px;border-radius:1em 0 0 1em">
                    <option value="1">全部检索词</option>
                    <option value="2">精确检索词,以逗号分割</option>
                    <option value="3">作者</option>
                    <option value="4">机构</option>
                </select>
                <input type="text" class="search-input" style="padding-left: 140px;outline: none">
                <button id="search-btn"><i class="iconfont icon-sousuo" style="vertical-align: text-bottom"></i>搜索</button>
            </div>
            <p class="down"><i class="iconfont icon-xiala"></i></p>
            <div class="select-search-num" style="display: none">
                <input type="text" id="num" placeholder="输入搜索页数,默认为10页">
                <p class="up" style="margin-bottom: 10px"><i class="iconfont icon-toTop-fill"></i></p>
            </div>
        </div>
    </header>
    <div class="display_list"></div>
    <div id="progress" style="opacity: 0">
        <p>30%</p>
        <div id="bar" style="width:30%"></div>
    </div>

    <div class="cover" style="display: none">
        <div class="loadEffect">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script src="axios.js"></script>
<script src="./iconfont/iconfont.js"></script>
<script>
    let url = "http://192.168.43.21:5000/api"
    let rules = [
        {
            index:1,
            text: function (wd) {
                return wd
            }
        },
        {
            index:2,
            text: function (wd) {
                let keyArr = wd.split(",");
                let word = ''
                word = keyArr.reduce((previous,next,index)=>{
                    return previous + "\"" + next + "\""
                },word)
                return word;
            }
        },
        {
            index:3,
            text: function (wd) {
                return `author:(${wd})`
            }
        },
        {
            index:4,
            text: function (wd) {
                return `affs:(${wd})`
            }
        }
    ]
    $(".down").on("click",
        function (){
            $("header").css({height:"170px"})
            $(".down").fadeOut("fast",function (){
                $(".down").hide()
            })
            $(".select-search-num").show()
        }
    )
    $(".up").on("click",function (){
        $(".select-search-num").fadeOut("fast",function (){
            $(".down").fadeIn("fast")
        })
        $("header").css({height:"108px"})

    })
    // console.log($(".cover:first").toggle("slow"));
    // console.log($(".cover:first").toggle());
    $("#search-btn").on("click",function (){
        let condition = document.getElementById("condition");
        let checkValue = condition.value;
        console.log(checkValue)
        let rule = rules.find(item=>{
            return item.index == checkValue
        })
        let val = $(".search-input").val();
        let num = parseInt($("#num").val())|| 10;
        $(".cover:first").show()
        axios.get({url:url.concat("/searchWord"),params:{wd:rule.text(val),pageNum:num}}).then((res)=>{
            if(res.status == "success"){
                $(".cover:first").hide()
                getList();
            } else {
                $(".cover:first").hide()
                console.log(res.msg)
            }
        })
    })
    class Process {
        constructor() {
        }
        text(process){
            let bar = document.getElementById("bar")
            bar.style.width = process + "%"
        }
    }
    let axios = new Axios();
    let process = new Process();
    process.text(0)
    function getList(){
        axios.get({url:url.concat("/list"),params:{name:1}}).then((res)=>{
            let div = document.querySelector(".display_list")
            let data = res.data;
            div.innerHTML = ""
            for(let item of data){
                let excel_box = document.createElement("div");
                let a = document.createElement("a");
                let fileUrl = url.concat("/static/file/")
                let svgns = "http://www.w3.org/2000/svg";
                let xlinkns = "http://www.w3.org/1999/xlink";
                let svg = document.createElementNS(svgns,"svg");
                svg.setAttribute("aria-hidden","true")
                svg.setAttribute("class","icon")
                let use = document.createElementNS(svgns,"use");
                use.setAttributeNS(xlinkns,"href","#icon-excel")
                svg.appendChild(use)
                a.appendChild(svg)
                let size = document.createElement("p")
                size.className = "size";
                let name = document.createElement("p")
                name.className = "name"
                if("filename" in item){
                    name.innerText = item["filename"]
                    a.href = "#"
                } else {return}
                a.onclick = function (){
                    event.preventDefault()
                    let time = Date.now()
                    axios.get({url:url.concat("/showProcess"),params:{uuid: time}}).then((res)=>{
                        if(res.status == "success"){
                            if(res.data.num == 100){
                                clearInterval(times)
                            }
                            console.log(res.data.num)
                        }
                    })
                    let times = setInterval(()=>{
                        axios.get({url:url.concat("/showProcess"),params:{uuid: time}}).then((res)=>{
                            if(res.status == "success"){
                                if(res.data.num == 100){
                                    clearInterval(times)
                                }
                                process.text(res.data.num)
                            }
                        })
                    },500)
                    console.log(times)
                    axios.post({url:url.concat("/download"),params:{filename:item["filename"],uuid:time}}).then(res=>{
                        if(res.status == "success"){
                            clearInterval(times);
                            console.log(8888)
                            process.text(100)
                            console.log("下载成功")
                            setTimeout(()=>{
                                process.text(0)
                            },5000)
                        }
                    })
                }
                if("size" in item){
                    size.innerText = item["size"]
                }
                a.appendChild(size)
                a.appendChild(name)
                excel_box.appendChild(a)
                div.appendChild(excel_box)
            }
        })
    }
    getList()


</script>
</body>
</html>
